<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">
    <th:block th:include="include :: header('首页')"/>
    <th:block th:include="include :: select2-css"/>

    <link href="favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/animate.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/ruoyi/css/ry-ui.css}"/>
    <link rel="stylesheet" th:href="@{/css/my.css}"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">
</head>
<body class="bd-bg">
<!--右侧主体-->
<div class="standard-detail">
    <div class="detail-main">
        <!--基本信息-->
        <div class="top clearfix">
            <div class="left-img"><img alt="" th:src="${ncStandard.pic}"></div>
            <div class="right-mes col-sm-12 col-md-10">
                <div class="mes-top clearfix">
                    <label class="fl">生产阶段：</label>
                    <div class="progressBar">
                        <ul class="progressBar-ul clearfix col-md-8" id="progressBar-ul" style="padding: 0;">
                            <li class="p-item  active" th:each="ncStage : ${ncStages}" th:text="${ncStage.stageName}">整地</li>
                        </ul>
                    </div>
                </div>
                <div class="mes-list clearfix">
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>标准名称：</label><span
                            th:text="${ncStandard.standardName}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>作物名称：</label><span
                            th:text="${ncStandard.cropNameCn}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>作物品种：</label><span
                            th:text="${ncStandard.cropVarietiesCn}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>作物类别：</label><span
                            th:text="${ncStandard.cropTypeCn}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>总周期天数：</label><span
                            th:text="${ncStandard.totalCycle}">西红柿-千禧-001</span></div>
                </div>
            </div>
        </div>
        <!--tab-->
        <div class="btm">
            <div class="btm-top">
                <ul class="tabList clearfix" id="tabList">
                    <li th:each="ncStage : ${ncStages}" th:class="'item '+ ${ncStage.cssClass}" th:text="${ncStage.stageName}">标题内容</li>
                </ul>
            </div>
            <div class="btm-content">
                <div  class="tab-content" th:each="ncStage:${ncStages}">

                    <div class="part-item clearfix">
                        <div class="item-left" th:utext="${ncStage.stageDetail}">
                            <p>
                                北京市巨山农场隶属于北京首都农业集团有限公司，位于首都环境保护区的西山脚下，西邻八大处公园、北京射击场，北倚香山、植物园，东望玉泉山、颐和园。环境优美、空气清新，无公害污染经农业部和北京市环境监测中心对农场生态环境监测，农场水质、大气、土壤的质量均达到国家规定的优级标准。</p>
                            <p>
                                巨山农场位于北辛庄村巨山生活区附近，原属8341部队（中央警卫团），后划拨三元集团管理。该公司下属另有延庆基地。国家标准委员会曾授予该基地“国家农业标准化示范区”，国家高层领导也曾到此视察。</p>
                        </div>
                        <div class="item-right">
                            <div class="btn-outer">
                                <a class="btn btn-primary" th:attr="typed-id = *{ncStage.stageId}"
                                   onclick="showDetail(2,this)">详细信息</a>
                            </div>
                        </div>
                    </div>
                    <div class="step-list">
                        <!--第一天开始-->
                        <div class="step-item" >
                            <div class="title" >第一天</div>

                            <!--第一个工作n-->
                            <div class="main" th:each="work:${ncStage.works}">
                                <div class="step-left">
                                    <div class="step-name">
                                        <p th:text="${work.workType == '1'?'栽培':'农资'}">栽培</p>
                                        <p th:text="${work.workName}">松土平地</p>
                                    </div>
                                    <div class="step-indro show-detail" onload="resetText(this)"
                                         th:utext="${work.workDetail}"
                                         th:block>

                                        <p>
                                            北京市巨山农场隶属于北京首都农业集团有限公司，位于首都环境保护区的西山脚下，西邻八大处公园、北京射击场，北倚香山、植物园，东望玉泉山、颐和园。环境优美、空气清新，无公害污染经农业部和北京市环境监测中心对农场生态环境监测，农场水质、大气、土壤的质量均达到国家规定的优级.
                                        </p>
                                    </div>
                                </div>
                                <div class="step-right">
                                    <div class="btn-outer">
                                        <a class="btn btn-primary">详细信息</a>
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                        <!--第一天结束-->

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:include="include::footer"></div>
<th:block th:include="include :: select2-js"/>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script>
    $(function () {

        $("#tabList li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var index = $(this).index();
            $(".btm-content .tab-content").eq(index).addClass("active").siblings().removeClass("active");
        });


        var _liArr = $('#progressBar-ul').children(".p-item");
        var _liWidth = 100 / _liArr.length;
        _liArr.each(function () {
            $(this).width(_liWidth + '%')
        });

        // 生产阶段
        var _currenttep = 2;
        _liArr.each(function (index) {
            if (index < _currenttep) {
                $(this).addClass('active')
            }
        })
    });


    function showDetail(type, obj) {
        var id = $(obj).attr('typed-id')
        var workDate = $(obj).attr('work-date')
        if (workDate) {
            workDate = dateFtt(new Date(workDate))

        }
        var link = ctx + 'system/ncStandard/detail?id=' + id + "&type=" + type + "&workDate=" + workDate;
        $.modal.open("详细信息", link);


    }

    $('.show-detail').each(function (i,e) {
        $(e).html(getText($(e).html()));
        $(e).removeClass("hidden")
    });

</script>
</body>
</html>
